// =============================================================================
// SCSS/SITE/STACKS/RENEW/_COLOPHON.SCSS
// -----------------------------------------------------------------------------
// Styles for the site's footer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-colophon {
  &.top {
    padding: 5% 0 5.25%;
    background-color: darken($baseModBackground, 2.25%);

    [class*="span"] {
      .widget:first-child {
        margin-top: 0;
      }
    }

    @include break(cubs) {
      padding: 6.5% 0;

      [class*="span"] {
        .widget:first-child {
          margin-top: 3em;
        }
      }

      [class*="span"]:first-child {
        .widget:first-child {
          margin-top: 0
        }
      }
    }
  }

  &.bottom {
    padding: 50px 0;
    @include font-size(1.1);
    line-height: 1.3;
    text-align: center;
    color: $white;
    background-color: $colophonBackground;

    .x-social-global {
      margin: 20px 0;

      a {
        margin: 0 1.25%;
        width: 54px;
        height: 54px;
        @include font-size(2.1);
        line-height: 54px;
      }
    }

    .x-nav {
      margin: 20px 0;
      text-align: center;

      li {
        margin: 0;
        display: inline-block;

        &:before {
          content: "/";
          float: left;
          margin: 0 0.55em 0 0.45em;
          @include opacity(0.35);
        }

        &:first-child:before {
          content: none;
        }

        a {
          display: inline;
          letter-spacing: 1px;
          text-transform: uppercase;
          @include opacity(1);

          &:hover {
            background-color: transparent;
            @include opacity(0.35);
          }
        }
      }
    }

    .x-colophon-content {
      margin: 20px 0;
      letter-spacing: 1px;
      @include opacity(1);
    }
  }

  .widget {
    margin-top: 3em;

    ul {
      li {
        background-color: darken($baseModBackground, 2%);
      }
    }
  }
}